<template>
<el-dialog
    v-el-drag-dialog
    custom-class="rs-dialog"
    :title="title"
    :visible.sync="dlgVisible"
    :close-on-click-modal="false"
    :before-close="()=>handleClose('cancel')"
    width="500px">
    <el-form :key="key" :model="form" :rules="rules" :label-width="formLabelWidth" ref="form">
        <el-form-item label="用户名称" prop="yhmc" >
            <el-input v-model="form.yhmc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="登录名称" prop="dlmc">
            <el-input v-model="form.dlmc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" prop="bmbh">
            <RsTreeEdit :readonly="readonly" v-model="form.bmbh" nodeKey="bmbh" :width="250" :height="250" 
                :defaultProps="defaultProps" :expandKeys="expandKeys" 
                :items="depts" style="width:100%;"></RsTreeEdit>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose('cancel')">取&emsp;消</el-button>
        <el-button size="small" type="primary" @click="handleClose('ok')">确&emsp;定</el-button>
    </span>
</el-dialog>
</template>
<script>
import deepmerge from 'deepmerge';
import dlg from '../../mixin/dlg';
import user from '@/api/user'
export default {
    name:"UserForm",
    mixins:[dlg],
    props:{
        depts:{
            type:Array,
            default:function(){
                return []
            }
        }
    },
    data(){
        return {
            defaultProps: {
                children: 'depts',
                label: 'bmmc',
                isLeaf: 'leaf'
            },
            expandKeys:[],
            key:0,
            defaultProps: {
                children: 'depts',
                label: 'bmmc',
                isLeaf: 'leaf'
            },
            readonly:false,
            expandKeys:[],
            formLabelWidth: '80px',
            form:{
                yhbh:'',
                yhmc:'',
                dlmc:'',
                bmbh:'',
                yhlx:0
            },
            rules: {
                yhmc:[
                    {required: true, message: '请输入用户名称'}
                ],
                dlmc:[
                    {required: true, message: '请输入登录名称'}
                ]
            }
        }
    },
    methods:{
        onShow(data){
            //this.$refs.form && this.$refs.form.resetFields();
            this.key += 1;
            this.readonly = data.readonly != undefined && data.readonly == true
            const {form} = this;
            if( data.yhbh ){
                this.title = "编辑"
                form.yhbh = data.yhbh;
                form.yhmc = data.yhmc;
                form.dlmc = data.dlmc;
                form.bmbh = data.bmbh;
                form.yhlx = data.yhlx;

            }else{
                this.title = "新建"
                form.yhbh = "";
                form.yhmc = "";
                form.dlmc = "";
                form.bmbh = "";
                form.yhlx = 1;
            }
        },
        onOk(){
            const {form,unit} = this;
            const data = deepmerge({},form);
            this.$refs.form.validate((valid)=>{

                if(!valid) return;
                user.saveUser(data)
                .then(response => {
                    const { data } = response;
                    if( data.error_code == 0 ){
                        this.closeDialog('ok');
                    }else{
                        this.$message({
                            message: data.error_code==20701?'用户已存在':data.error_desc,
                            type: 'warning'
                        });
                    }
                }).catch(error => {
                    this.$message({message: '本地异常',type: 'warning'});
                });
            });
        }
    }
}
</script>